<template>
  <div class="ucenter-content">
    <div class="title">{{ name }}</div>
    <ChartCard :title="'资源概况'">
      <template #chart>
        <div class="chart c3">
          <ResourceNumCard></ResourceNumCard>
          <div class="c3-2">
            <div class="c3-2-m1">
              <MiniChartCard :title="'设备状态'">
                <template #chart>
                  <PieEcharts2 :data="equipDataList" :color-list="equipColor"></PieEcharts2>
                </template>
              </MiniChartCard>
            </div>
            <div class="c3-2-m2">
              <MiniChartCard :title="'主机状态'">
                <template #chart>
                  <PieEcharts :name="'主机'" :data="hostDataList" :color-list="hostColor"></PieEcharts>
                </template>
              </MiniChartCard>
            </div>
            <div class="c3-2-m3">
              <MiniChartCard :title="'云主机状态'">
                <template #chart>
                  <PieEcharts :name="'云主机'" :data="cloudDataList" :color-list="cloudColor"></PieEcharts>
                </template>
              </MiniChartCard>
            </div>
          </div>
        </div>
      </template>
    </ChartCard>
    <ChartCard :title="'资源使用'">
      <template #chart>
        <div class="chart m2">
          <div class="m2-c1">
            <MiniChartCard :title="'资源分配比'">
              <template #chart>
                <div class="m2-c1-a1">
                  <div class="item" v-for="(item, i) in resourceList" :key="i">
                    <WaterChart class="item-left" :data="item" :color-list="resourceColor[i]"></WaterChart>
                    <div class="item-right">
                      <div class="item-right-list" v-for="(itemb, j) in item.list" :key="j">
                        <span>{{ itemb.name }}</span>
                        <span>{{ itemb.value }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </MiniChartCard>
          </div>
          <div class="m2-c2">
            <MiniChartCard :title="'云主机高CPU利用率TOP5'">
              <template #chart>
                <TProgress :data="hostRateList"></TProgress>
              </template>
            </MiniChartCard>
          </div>
          <div class="m2-c2">
            <MiniChartCard :title="'云主机低CPU利用率TOP5'">
              <template #chart>
                <TProgress :data="cloudRateList"></TProgress>
              </template>
            </MiniChartCard>
          </div>
        </div>
      </template>
    </ChartCard>
  </div>
</template>

<script setup lang="ts" name="System">
import { ref } from "vue";
import ChartCard from "../component/chartCard.vue";
import MiniChartCard from "../component/minChartCard.vue";
import PieEcharts from "../component/pieEcharts.vue";
import PieEcharts2 from "../component/pieEcharts2.vue";
import WaterChart from "../component/waterChart.vue";
import TProgress from "../component/progress.vue";
import ResourceNumCard from "./resourceNumCard.vue";

export interface Props {
  name: string;
}
withDefaults(defineProps<Props>(), {
  name: ""
});
// 设备状态
const equipDataList = ref([
  { name: "未管理", value: 9 },
  { name: "正常", value: 741 },
  { name: "次要", value: 15 },
  { name: "严重", value: 0 },
  { name: "未知", value: 2 },
  { name: "警告", value: 15 },
  { name: "重要", value: 15 }
]);
const equipColor = ref(["#868485", "#86C25A", "#FFC300FF", "#F6302FFF", "#5C8BBC", "#1F8CF2FF", "#FF8F1FFF"]);

// 主机状态
const hostDataList = ref([
  { name: "正常", value: 9 },
  { name: "维护", value: 27 },
  { name: "异常", value: 15 }
]);
const hostColor = ref(["#86C25A", "#1F8CF2FF", "#F6302FFF"]);

// 云主机状态
const cloudDataList = ref([
  { name: "正常", value: 19 },
  { name: "关闭", value: 27 },
  { name: "异常", value: 25 }
]);
const cloudColor = ref(["#86C25A", "#D8E0F0FF", "#F6302FFF"]);

// 资源分配比
const resourceList = ref([
  {
    name: "cpu",
    percent: 0.18,
    list: [
      { name: "主机CPU总核数", value: 33 },
      { name: "云主机CPU总核数", value: 33 }
    ]
  },
  {
    name: "内存",
    percent: 0.34,
    list: [
      { name: "主机内存总数", value: 33 },
      { name: "云主机内存总数", value: 33 }
    ]
  },
  {
    name: "存储",
    percent: 0.18,
    list: [
      { name: "存储总数", value: 33 },
      { name: "可用总数", value: 33 }
    ]
  }
]);
const resourceColor = ref([
  ["#5499ED", "#A7CBF5"],
  ["#4DC973", "#95D1A8"],
  ["#A361A9", "#CBAFD1"]
]);

// 主机利用率
const hostRateList = ref([
  { name: "fwogrewfewgrewjjtr", value: 100 },
  { name: "cndovw", value: 67 },
  { name: "cwshuoireq", value: 62 },
  { name: "fevrbwtb", value: 60 },
  { name: "cwshuoireq", value: 35 }
]);
// 主机利用率
const cloudRateList = ref([
  { name: "fwogrew", value: 84 },
  { name: "cndovw", value: 67 },
  { name: "cwshuoireq", value: 62 },
  { name: "fevrbwtb", value: 60 },
  { name: "cwshuoireq", value: 35 }
]);
</script>

<style scoped lang="scss">
@import "../common.scss";
.ucenter-content {
  .c3 {
    flex-direction: column;
    .c3-1 {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 16px;
    }
    .c3-2 {
      // flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      .c3-2-m1 {
        flex: 1.4;
        min-width: 550px;
        height: 320px;
      }
      .c3-2-m2 {
        flex: 1;
        min-width: 400px;
        height: 320px;
      }
      .c3-2-m3 {
        flex: 1;
        min-width: 400px;
        height: 320px;
      }
    }
  }
  .m2 {
    .m2-c1 {
      display: flex;
      flex: 1;
      min-width: 800px;
      max-width: 1000px;
      height: 320px;
      .m2-c1-a1 {
        display: flex;
        width: 100%;
        height: 100%;
        .item {
          display: flex;
          flex: 1;
          .item-left {
            flex: 1;
          }
          .item-right {
            display: flex;
            flex-direction: column;
            row-gap: 16px;
            justify-content: center;
            width: 140px;
            .item-right-list {
              display: flex;
              flex-direction: column;
            }
          }
        }
      }
    }
    .m2-c2 {
      flex: 1;
      min-width: 400px;
      max-width: 600px;
      height: 320px;
    }
  }
}
</style>
